<!--管理授权-->
<template>
    <div class="content-box">
        <div class="condition-box">
            <el-form :inline="true" :model="condition" class="demo-form-inline">
                <el-form-item label="管理员名">
                    <el-input type="text" v-model="condition.adminname" placeholder="请输入用户名" size="mini" clearable>
                    </el-input>
                </el-form-item>
                <el-button type="primary" @click="search()" size="mini">查询</el-button>
                <el-button type="default" @click="reset()" size="mini">重置</el-button>
                <el-button type="danger" @click="addadmin()" size="mini" v-show="tableDate.power=='1'">新增</el-button>
            </el-form>
        </div>
        <div class="tablef">
            <el-table :data="admin" @selection-change="handlerCelectionChange" height="400px" border size="mini"  style="width: 100%; text-align: center;">
                <el-table-column prop="adminname"  label="姓名"></el-table-column>
                <el-table-column prop="sex"  label="性别"></el-table-column>
                <el-table-column prop="power"  label="权限">
                    <template scope="scope">
                        {{getPower(scope.row.power)}}
                    </template>
                </el-table-column>
                <el-table-column prop="phone"  label="手机号码" show-overflow-tooltip></el-table-column>
                <el-table-column prop="state"  label="状态">
                    <template scope="scope">
                        {{getDict(scope.row.state)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作"  width="200">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini"  @click="editAdmin(scope.row)" v-show="tableDate.power==1">修改</el-button>
                        <el-button type="text" size="mini"   v-show="tableDate.power==2||tableDate.power==3" disabled>无权限！</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination small background
                       :page-sizes="[5,10,15,20]"
                       layout="total,sizes,prev,pager,next"
                       :current-page="currentPage"
                       :page-size="displayCount"
                       :total=total
                       @current-change="changeCurrentPage"
                       @size-change="changeSize"
        >
        </el-pagination>
        <el-dialog :title="title" :visible.sync="addvisible"
                   width="45%" @close="closeDialog" center>
            <el-form :model="add" :rules="adminRules" :inline="true" v-show="title=='新增'">
                <el-form-item label="电话" label-width="100px"  prop="phone">
                    <el-input v-model="add.phone" size="mini" clearable placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" label-width="100px">
                    <el-input v-model="add.password" size="mini" clearable placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="edit" :rules="adminRules" :inline="true" v-show="title=='修改'">
                <el-form-item label="电话" label-width="100px"  prop="phone">
                    <el-input v-model="edit.phone" size="mini" clearable placeholder="请输入" :disabled="power==1"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" label-width="100px">
                    <el-input v-model="edit.password" size="mini" clearable placeholder="请输入" :disabled="power==1"></el-input>
                </el-form-item>
                <el-form-item label="用户名" label-width="100px">
                    <el-input v-model="edit.adminname" size="mini" clearable placeholder="请输入" :disabled="power==1"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="100px">
                    <el-select v-model="edit.sex" size="mini" clearable placeholder="请输入" :disabled="power==1">
                        <el-option
                                v-for="s in sexs"
                                :key="s.value"
                                :label="s.text"
                                :value="s.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" label-width="100px">
                    <el-select v-model="edit.state" size="mini" clearable placeholder="请输入" :disabled="power==1">
                        <el-option
                                v-for="s in states"
                                :key="s.value"
                                :label="s.text"
                                :value="s.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限" label-width="100px">
                    <el-select v-model="edit.power" size="mini" clearable placeholder="请输入" :disabled="power==1">
                        <el-option
                                v-for="s in powers"
                                :key="s.value"
                                :label="s.text"
                                :value="s.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="头像" label-width="100px">
                    <el-input v-model="edit.image" size="mini" clearable placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog" size="small">取 消</el-button>
                <el-button type="primary" @click="saveAdmin" size="small">保 存</el-button>
            </div>

        </el-dialog>

    </div>
</template>
<script>
    import {adminSearch,adminAdd,adminUpdate} from "../../api/user";
    export default {

        name:'Admin',
        data(){
            return{
                power:null,
                condition:{
                    adminname:'',
                    page:null,
                    limit:null,
                },
                add:{
                    phone:'',
                    password:''
                },
                edit:{},
                title:'',
                addvisible:false,
                admin:[],
                adminRules:{
                    phone: [
                        { validator: this.checkPhone,required:true, trigger: 'blur' }
                    ],
                    password: [
                        {required: true, message: '请输入', trigger: 'blur'},
                    ],
                },
                sexs:[
                    {value:'男',text:'男'},
                    {value:'女',text:'女'},
                ],
                states:[
                    {value:0,text:'注销'},
                    {value:1,text:'使用中'},
                ],
                powers:[
                    {value:'1',text:'超级管理员'},
                    {value:'12',text:'管理员'},
                    {value:'123',text:'业务员'},
                ],
                currentPage:1,
                displayCount:5,
                total:0,
                tableDate:{},
            }
        },
        methods:{
            search(){
                this.condition.page=this.currentPage,
                    this.condition.limit=this.displayCount,
                adminSearch(
                    this.condition
                ).then((res)=>{
                    this.admin = res.data;
                    this.total = res.count ;
                })
            },
            addadmin(){
                this.title='新增'
                this.addvisible= true ;
            },
            saveAdmin(){
                if(this.title=='新增') {
                    adminAdd(
                        this.add
                    ).then((res) => {
                        if (res.msg === "OK") {
                            this.$message.success('注册成功')
                            this.addvisible = false;
                        } else if (res.msg === '该手机号已经被注册') {
                            this.$message.error('该手机号已经被注册')
                        }

                    })
                }else {
                    if (this.edit.power !== this.power) {
                        this.$confirm('检测到权限更改！ 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(()=> {
                            adminUpdate(this.edit).then((res) => {
                                if (res.msg == 'OK') {
                                    this.$message.success('修改成功!')
                                    this.addvisible = false;
                                    this.search()
                                } else {
                                    this.$message.error('修改失败!')
                                }
                            })
                            }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消!'
                            });
                        });
                    }else {
                        adminUpdate(this.edit).then((res) => {
                            if (res.msg == 'OK') {
                                this.$message.success('修改成功!')
                                this.addvisible = false;
                                this.search()
                            } else {
                                this.$message.error('修改失败!')
                            }
                        })
                    }
                }
            },
            reset(){
                this.condition.adminname=''
            },
            closeDialog () {
                this.add={
                    phone: '',
                    password: ''
                },
                    this.addvisible = false;
            },
            checkPhone(rule, value, callback) {
                var reg = /^1[3|5|6|7|8|9][0-9]{9}$/;
                if (value === '' && this.flag == '1') {
                    callback(new Error("手机号不能为空！"));
                } else if (!reg.test(value)) {
                    callback(new Error("请输入正确手机号！"));
                } else {
                    callback();
                }
            },
            //当表格的选中发生改变触发
            handlerCelectionChange(){

            },
            //当点击编辑按钮触发
            editAdmin(admin){
                this.edit= {...admin}
                this.power=admin.power
                this.title='修改'
                this.addvisible = true ;
            },
            getDict(data){
                if(data==0){
                    return '注销'
                }else {
                    return '使用中'
                }
            },
            getPower(data){
                if(data=='1'){
                    return '超级管理员'
                }else if(data=='12'){
                    return '管理员'
                }else {return '业务员'}
            },
            //当前页码改变触发
            changeCurrentPage(val){
                this.currentPage = val ;
                this.search();
            },
            //每页展示的记录数发生改变
            changeSize(val){
                this.displayCount = val ;
                this.search();
            },

        },
        mounted(){
            this.search();
            this.tableDate=JSON.parse(localStorage.getItem('admin'))
        }
    }
</script>

<style scoped>
    .content-box{
        width: calc(100% - 10px);
        height: 100%;
    }
    .condition-box, .button-box{
        height: 40px;
        line-height: 40px;
        color: #909399;
        font-size: 12px;
        margin: 10px;
    }
    .tablef {
        flex: 8.25;
        border-radius: 0px;
        box-shadow: rgba(0, 0, 0, 0.047) 0px 3px 5px;
    }
    .condition-box{
        color: #909399;
        font-size: 12px;
    }
    .el-pagination{
        height: 30px;
        padding-top: 10px;
    }
    .el-input, .el-select{
        width: 120px;
        margin-right: 10px;
    }
</style>
<style>
    .el-pagination .el-select .el-input > input{
        height: 22px;
    }

    .el-pagination > span{
        float: left;
    }
</style>